<template>
  <div class="design-toolbox">
    <div class="title">
      <span>{{ locale.studio.design.toolbox }}</span>
      <el-icon @click="hideThis">
        <Close/>
      </el-icon>
    </div>
    <el-scrollbar class="side-scroll-bar">
      <el-collapse v-model="activeNames" class="widget-collapse">

        <template v-for="category in categoryList">
          <el-collapse-item :name="category.name"
                            :title="locale.studio.design.toolboxPanel[category.name] ?? category.name">
            <draggable tag="ul" :list="toolboxTree[category.name]" item-key="key"
                       :group="{name: 'rowGroup', pull: 'clone', put: false}"
                       :clone="_widgetClone" ghost-class="ghost" :sort="false"
                       :move="_hoverMove" @end="_dragEnd">
              <template #item="{ element: ctn }">
                <li class="container-widget-item"
                    :title="locale.components[ctn._cmpTag] ? locale.components[ctn._cmpTag].name : ctn._cmpTag">
                  <div class="item-wrap">
                    <component :is="getIconDiv(ctn.icon)"/>
                    <span>{{ locale.components[ctn._cmpTag] ? locale.components[ctn._cmpTag].name : ctn._cmpTag }}</span>
                  </div>
                </li>
              </template>
            </draggable>
          </el-collapse-item>
        </template>

      </el-collapse>
    </el-scrollbar>
  </div>
</template>

<script>
import _ from 'lodash'
import {h} from 'vue'
import {ElIcon} from 'element-plus'
import Designer from "@/studio/design/Designer"
import {getToolbox} from "@/runtime/CmpStore"
import VJsonContext from "@/runtime/VJsonContext"
import {Close} from "@element-plus/icons-vue"
import {renderIcon} from "@/components/web/webutils"
import {ToolboxCategory} from '@/components/Defaults'
import YvI18nMixin from "@/components/YvI18nMixin";

export default {
  mixins: [YvI18nMixin],
  components: {
    Close
  },
  props: {
    designer: Designer,
    vcxt: VJsonContext,
    showNewModule: Object,
  },
  data() {
    let toolbox = getToolbox()

    // 排序
    toolbox = _.sortBy(toolbox, ['group', 'order'])

    // 按照 category 树形进行分组
    const toolboxTree = _.groupBy(toolbox, 'category')

    /**
     * 按照Defaults定义的 ToolboxCategory 来定义工具箱分组的中文名和顺序
     * 例如 categoryList = [advance,basic,ss1]
     * 根据 ToolboxCategory [ { {name: 'basic', labnel: '基本'}, {name: 'advance', text: '高级'},} ]
     * 变换为
     * categoryList = [
     *   {name:'basic', label:'基础组件'},
     *   {name:'advance', label:'高级组件'},
     *   {name:'ss1', label:'ss1'},
     * ]
     */
    let categoryList = []
    _.forEach(_.keys(toolboxTree), category => {
      const categoryInfo = ToolboxCategory.find(item => item.name === category)
      if (categoryInfo) {
        categoryList.push(categoryInfo)
      } else {
        categoryList.push({name: category, order: 1000})
      }
    })
    categoryList = _.sortBy(categoryList, ['order'])

    return {
      categoryList,
      toolboxTree,
      activeNames: _.map(categoryList, 'name'),
    }
  },
  mounted() {

  },
  methods: {
    getToolbox,
    getIconDiv(icon) {
      if (typeof icon === 'string') {
        return h('div', {class: 'item-icon'}, [
          h('span', {class: 'icon iconfont ' + icon})
        ])
      }
      if (typeof icon === 'function') {
        return h('div', {class: 'item-icon'}, [
          h(icon)
        ])
      }
      // return  Tickets /></el-icon>
      return h('div', {class: 'item-icon'}, [
        renderIcon('Tickets')
      ])
    },
    hideThis() {
      this.$emit('hideThis')
    },
    checkMove(evt) {
      return this.designer.checkWidgetMove(evt)
    },

    _hoverMove(evt) {
      return this.designer.checkWidgetMove(evt)
    },

    _dragEnd(evt) {
      return this.designer.dragEnd()
    },

    _widgetClone(origin) {
      return this.designer.copyNewWidget(origin)
    },
  }
}
</script>
<style lang="less">
.design-toolbox {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .title {
    height: 38px;
    border-bottom: 1px solid #e1e1e1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 38px;

    span {
      margin-left: 10px;
      font-size: 16px;
      color: #000;
      font-weight: bold;
    }

    .el-icon {
      font-size: 16px;
      position: relative;
      cursor: pointer;
      top: 11px;
      margin-right: 10px;
    }
  }

  .side-scroll-bar {
    flex: 1;
    overflow: auto;

    .el-collapse-item {
      .el-collapse-item__header {
        background: var(--header-color);
        border: none;
        padding-left: 10px;
        height: 38px;
      }

      .el-collapse-item__wrap {
        .el-collapse-item__content {
          padding: 0;

          ul {
            margin: 0;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            padding: 5px;

            li {
              list-style: none;
              width: 50%;
              padding: 0 5px;

              .item-wrap {
                height: 36px;
                border: 1px solid #edeef0;
                display: flex;
                flex-direction: row;
                cursor: pointer;
                transition: box-shadow .2s ease, -webkit-box-shadow .2s ease;
                margin: 5px 0;

                &:hover {
                  border-color: #409eff;
                }

                .item-icon {
                  height: 36px;
                  line-height: 36px;
                  text-align: center;
                  margin: 0 5px;

                  span {
                    font-size: 18px;

                    &.icon-yigouxuan {
                      font-size: 15px;
                    }

                    &.icon-gouxuan {
                      font-size: 15px;
                    }

                    &.icon-sousuokuang {
                      font-size: 25px;
                    }

                  }

                  & + span {
                    display: inline-block;
                    line-height: 36px;
                    flex: 1;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    margin-right: 5px;
                  }

                }
              }
            }
          }
        }
      }
    }
  }
}
</style>